2023/12/235151字符

事件循环

进程

程序运行需要有他专属的内存空间，可以把这块儿内存空间简单的理解为进程；
每个应用至少有一个进程，进程之间相互独立。即使要通信，也需要双方同意。

线程

一个进程至少有一个线程，在进程开启后创建一个线程来运行代码，该线程称之为主线程；
如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码。

浏览器进程

浏览器进程
- 界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程来处理不同的任务。
网络进程
- 加载网络资源。启动多个线程来处理不同的网络任务。
渲染进程
- 渲染进程启动后，会开启一个渲染主线程，主线程复制执行 HTML、CSS、JS 代码。
- 默认情况下，浏览器会为每个标签页开启一个新的渲染线程，保证不同的标签页之间相互不影响。
  - chrome 将来可能有所改变（一个站点一个进程）官方文档

渲染主线程是如何工作的

渲染主线程是浏览器中最繁忙的线程

HTML 解析
CSS 解析
计算样式（em换算px）
布局（几何信息）
图层（z-index）
每秒把页面渲染 60 次（FPS）
执行 JS 代码
执行事件处理函数
执行计时器的回调函数

渲染进程不适用多个线程来处理这些事情

如何调度任务

chrome 源码

渲染主线程会进入一个无限循环（W3C: event look | Chrome: message look）；
每一次循环都会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，没有则进入休眠状态；
其他所有线程（包括其他进程的线程）可以随时向消息队列中追加任务。在添加任务时，如果主线程是休眠状态，则会唤醒渲染主线程继续工作。

何为异步

主线程承担者及其重要的工作，无论如何都不能阻塞！

定时器
- 交给计时线程去计时，计时结束后再将任务交给主渲染线程执行
XHR，Fetch
事件

如何理解 JS 的异步

JS 是一门单线层语言，他运行在浏览器的渲染主线程内，而渲染主线程只有一个；
而渲染主线层承担者诸多的工作：...
如果使用同步的方式，就极有可能导致主线层产生阻塞，从而导致消息队列中的其他任务无法得到执行。导致主线层白白的消耗时间，给用户造成页面卡死的现象；
所以浏览器采用异步的方式来避免。具体做法就是当遇到异步任务时绕过，将该任务交给其他线层去处理，自身立即执行后续代码。当其他线层完成时，将事先传递的回调函数包装成任务，加入到消息队列末尾，等待主线程调度执行。
在这种异步模式下，浏览器最大限度的保证了但线程的流畅程度。

function delay(durtion) {
  const start = Date.now();
  while(Date.now() - start < durtion) {}
}

btn.onclick = () => {
  document.write('write');  // 这里实际上内容已经改变了，但还没渲染
  delay(3000);
}

目前 Chrome 中的队列

W3C 任务队列标准 W3C 不再使用宏队列的说法，而是根据实际情况做优先级处理

延时队列：用于存放计时器到达后的回调任务，优先级【中】；
- 定时器
事件队列：用于存放操作系统用户操作产生后的事件处理任务，优先级【高】；
- DOM 操作、H5 history 操作
微队列：用户存放需要最快执行的任务，优先级【最高】。
- Promise、MutationObserver

源码中有很多队列，但跟前端开发关系不大了

总结

事件循环又叫消息循环，是浏览器渲染主线层的一种工作方式。在 Chrome 中，它会开启一个不回结束的循环，每次循环从消息队列中取出第一个任务执行，从而其他线程只需要在合适的时候将任务加到队列末尾。过去把消息队列简单分为微队列和宏队列，最新的 W3C 规范要求浏览器自行决定取哪一个任务，但浏览器至少有一个微队列，其优先级最高，必须优先调度执行。

单线层时异步产生的原因，事件循环是异步的实现方式

JS 的计时器能精确计时吗？

计算机硬件没有原子钟，无法做到精确计时；
操作系统计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了些偏差；
按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差；
受事件循环的影响，计时器的回调函数只能在主线层空闲时运行，因此又带来了偏差。